import {config} from '../../spa/configData.js';
import unit from '../../js/tool/unit.js';
import Vuex from 'vuex';
import axios from 'axios';
import Vue from 'vue/dist/vue.js';
import cp_ii from "../../spa/effect/Connected_Particles_II/Connected_Particles_II";
Vue.use(Vuex);

let sc_unit = {
    store:new Vuex.Store({
        state:{
            listData: {
                date:'',
                listName:'',
                article:[]
            },
            iframeSrc:'',
            re:{
                data:''
            },
            indexShow:true
        },
        mutations:{
            updateListData: (state,newData)=> {
                state.listData = newData;
            },
            updateIframeSrc:(state,newData)=>{
                state.iframeSrc = newData;
            },
            updateRe:(state,newData)=>{
                state.data = newData;
            },
            updateIndexShow:(state,newData)=>{
                state.indexShow = newData;
            }
        },
        getters:{
            getListData:(state)=>{
                return state.listData||'null';
            },
            getIframeSrc:(state)=> {
                return state.iframeSrc || 'null';
            },
            getRe:(state)=>{
                return state.data||'null';
            },
            getIndexShowData:(state)=>{
                return state.indexShow;
            }
    }
    }),
    result_display:function (uri) {
        /*
        * uri:要传递给iframe.src的数据
        * */
        document.getElementById('result_iframe').src = uri;
    }
};

let source_code = (function () {


    let SC_result = {
        props:['width','height'],
        /*
        * 2018.2.11
        * 在上面这个日期中,src是从kfm_v2/webpack/dist开始寻找文件的
        * webpack下的dist是前端的工作目录,只有这个目录中的文件才能被src索引到
        * 要显示webpack/dist以外的文件,可以在express中使用app.use('/static', express.static('public'));
        * */
        template:
        '<div id="SC_result" :style=[resultStyle] >' +
            '<span :style=[container] @click="updateIndexShow" >返回特效选择列表' +
            '</span>'+
            '<iframe id="result_iframe" :style=[iframeStyle] frameborder="0" >你的浏览器不支持iframe</iframe>' +
        '</div>',
        data:function () {
            let containerWidth = 80;
            return {
                resultStyle:{
                    width:window.innerWidth+'px',
                    height:window.innerHeight+'px'
                },
                container:{
                    /*该元素的位于屏幕左侧,用于使用户返回特效选择界面*/
                    position:'relative',
                    display:'inline-block',
                    backgroundColor:'#2f2929',
                    float:'left',
                    fontSize:60+'px',
                    textAlign:'center',
                    color:'#ffffff',
                    width:containerWidth+'px',
                    height:window.innerHeight+'px'
                },
                iframeStyle:{
                    display:'inline-block',
                    position:'relative',
                    backgroundColor:'#2f2929',
                    float:'left',
                    width:window.innerWidth-80+'px',
                    height:window.innerHeight+'px',
                }
            }
        },
        methods:{
            updateIndexShow:function (event) {
                console.log(event.clientX);
                if(event.clientX<=80){
                    this.$store.commit('updateIndexShow',true);
                }else{
                    this.$store.commit('updateIndexShow',false);
                }
            },
            getInitNum:function () {
                /*返回参数用于提供给getWidth和getHeight使用*/
                /*以此生成一个16:9比例的区域*/
                return 80;
            },
            getWidth:function () {
                return this.getInitNum()*16;
            },
            getHeight:function () {
                return this.getInitNum()*9;
            },
            getMarginLeft:function () {
                return (this.$props.width-this.getWidth())/2;
            }
        },
        mounted:function () {
        }
    };

    let SC_code = {
        template:
            '<div id="SC_code"></div>'
    };

    let codeContent = {
        props:['codeCont_w','codeCont_h'],
        template:
        '<div id="codeContent" :style=[codeContentStyle]>' +
        '<SC-result id="result" :width="this.$props.codeCont_w" :height="this.$props.codeCont_h"></SC-result>' +
        '<SC-code id="code"></SC-code>'+
        '</div>',
        data:function () {
            return {
                codeContentStyle:{
                    position:'relative',
                    display:'inline-block',
                    float:'left',
                    background:'#c4cb8c',
                    width:this.$props.codeCont_w+'px',
                    height:this.$props.codeCont_h+'px'
                }
            }
        },
        methods:{
            updateCodeContent:function () {
                this.$data.codeContentStyle.width=this.$props.codeCont_w+'px';
                this.$data.codeContentStyle.height=this.$props.codeCont_h+'px';
            },
            resize:function () {
                this.updateCodeContent();
            }
        },
        mounted:function () {
            // unit.observer.add('SC_codeCont',this.resize);
        },
        components:{
            'SC-result':SC_result,
            'SC-code':SC_code
        }
    };

    let list = {
        /*
        * 文章列表
        * */
        props:['listWidth','listHeight','effectName'],
        template:
        '<ul id="list" >' +
            '<li :id="this.$props.effectName" @click="clickEvent" :style=[liStyle]>{{name}}</li>' +
        '</ul>',
        data:function () {
            return {
                name:this.$props.effectName,
                liStyle:{
                    position:'relative',
                    display:'inline-block',
                    cursor:'Pointer',
                    color:'#000000',
                    fontSize:70+'px',
                    left:0
                }
            }
        },
        methods:{
            updateIndexShow:function (event) {
                // console.log(event.clientX);
                this.$store.commit('updateIndexShow',false);
            },
            clickEvent:function () {
                this.updateIndexShow();
                this.updateShow();
            },
            getLeft:function () {
                let li = document.getElementById(this.$data.name);
                let patt = /\d*/;
                let width = patt.exec(window.getComputedStyle(li).width);
                this.$data.liStyle.left = ((window.innerWidth-width)/2)+'px';
            },
            display:function (uri) {
                /*
                * uri:要传递给iframe.src的数据
                * */
                document.getElementById('result_iframe').src = uri;
            },
            updateShow:function () {
                /*
                * 点击相应特效名后,向后台请求该特效的href连接
                * */
                let _this = this;
                let uri = 'queryEffect';
                axios.post(uri,{effectName:this.$data.name}).then(function (res) {
                    sc_unit.result_display(res.data);
                });
            }
        },
        mounted:function () {
            this.getLeft();
        }
    };

    let index = {
        /*
        * 文章目录
        * 'indexWidth','indexHeight','indexCont_w'分别对应index的宽,高,内容宽度.内容高度由list动态扩展.
        * */
        props:['indexWidth','indexHeight','indexCont_w'],
        template:
        '<transition name="sc-index">'+
            '<div id="SC_index" :style=[indexStyle] v-show="show" >' +
                '<canvas :id="getCanvasId()" :style=[canvasStyle] ></canvas>'+
                '<list  v-for="num in listProps.listData" :key="num.listName" :effectName="num.special_effect_name" :listWidth="listProps.w" :listHeight="listProps.h"></list>' +
            '</div>'+
        '</transition>',

        data:function () {

            return {
                imgSrc:'',
                axios:{
                  data:null
                },
                listProps:{
                    w:this.$props.indexCont_w,
                    h:30,
                    listData:this.getList(),
                },
                canvasStyle:{
                    position:'absolute'
                },
                indexStyle:{
                    position:'absolute',
                    display:'inline-block',
                    backgroundColor:'#cecece',
                    zIndex:2,
                    width:this.getW()+'px',
                    height:this.getH()+'px'
                }
            }
        },

        computed:{
            show:function () {
                return this.$store.getters.getIndexShowData;
            }
        },

        methods:{
            getW:function () {
                return window.innerWidth;
            },
            getH:function () {
                return window.innerHeight;
            },
            getCanvasId:function () {
                return 'myCanvas'
            },
            _cp_ii:function () {
                cp_ii.run(this.getCanvasId(),this.getW(),this.getH(),4,2);
            },
            imgRequest:function () {
                /*向后台请求背景图片*/
                /*已经用动态背景替换掉该功能,或许这个功能以后会用到*/
                let _this = this;
                let url = '/img/02.jpg';
                axios.post(url).then(function (res) {
                    _this.$data.indexStyle.backgroundImage = 'url('+res.data+')';
                })
            },
            getList:function () {
                /*
                * 向后台请求特效列表数据
                * */
                let _this = this;
                let uri = 'queryEffectList';
                axios.post(uri).then(function (res) {
                    _this.$data.listProps.listData = res.data;
                });
                return 0;
            },
            updateIndex:function () {
                this.$data.indexStyle.width=this.$props.indexWidth+'px';
                this.$data.indexStyle.height=this.$props.indexHeight+'px'
            },
            resize:function () {
                this.updateIndex();
            }
        },
        mounted:function () {
            this._cp_ii();
        },
        beforeDestroy:function () {
            cp_ii.stop();
        },
        components:{
            'list':list
        }
    };

    let root = {
        store:sc_unit.store,
        template:
        '<transition name="sc">'+
        '<div id="source_code" :style=[source_codeStyle] >' +
        '<index :indexWidth="indexProps.w" :indexCont_w="indexProps.content_w" :indexHeight="indexProps.h"></index>' +
        '<code-content id="codeContent" :codeCont_w="codeContProps.w" :codeCont_h="indexProps.h"></code-content>'+
        '</div>'+
        '</transition>',
        data:function () {
            let getRoot_h = function () {
                // return window.innerHeight-config.nav_h;
                return window.innerHeight;
            };
            return {
                indexProps:{
                    w:this.indexProps_w(),
                    //content_w该属性是子组件的内容所需要的宽度,否则会出现底部滚动条
                    content_w:this.indexProps_w()-this.getScrollbar_w(),
                    h:this.indexProps_h()
                },
                codeContProps:{
                    w:window.innerWidth-this.indexProps_w()
                },
                source_codeStyle:{
                    position:'absolute',
                    display:'inline-block',
                    background:'#3e650c',
                    // top:config.nav_h+'px',
                    width:window.innerWidth+'px',
                    height:getRoot_h()+'px'
                }
            }
        },
        methods:{
            getScrollbar_w:function () {
                return config.scrollbar_w;
            },
            indexProps_w:function () {
                return 150;
            },
            indexProps_h:function () {
                // return window.innerHeight-config.nav_h;
                return window.innerHeight;
            },
            updateIndexProps:function () {
                this.indexProps.w=this.indexProps_w();
                this.indexProps.content_w=this.indexProps_w()-this.getScrollbar_w();
                this.indexProps.h=this.indexProps_h();
            },
            updateCodeContProps:function () {
                this.codeContProps.w=window.innerWidth-this.indexProps_w();
                // console.log( this.codeContProps.w);
            },
            updateSource_codeStyle:function () {
                this.$data.source_codeStyle.width=window.innerWidth+'px';
            },
            resize:function () {
                this.updateCodeContProps();
                this.updateIndexProps();
                this.updateSource_codeStyle();
            }
        },
        mounted:function () {
            unit.observer.add('SC_root',this.resize);
        },
        components:{
            'index':index,
            'code-content':codeContent
        }
    };

    let rootInstance = {
        /*构建该js的vue实例所用*/
        el:'#root',
        template:
            '<root-container></root-container>',
        components:{
            'root-container':root
        }
    };

    let commitEffectName = function (_effectName) {
        /*
        * 给其他的模块提供修改本模块显示内容的功能
        * */
        let data = {
            author:'coffeCat',
            effectName:_effectName
        };
        axios.post('queryEffect',data).then(function (response) {
            //使用延时函数是为了在切换页面时,不卡顿
            unit.setTimeout(function () {
                sc_unit.result_display(response.data);
            },1000);

        });

    };

    return {
        root:rootInstance,
        commitEffectName:commitEffectName
    }
})();

export default source_code;